<template>
  <div class="maincontain">
    <div class="filter-bar"></div>
    <div class="userlist">
      <a-table
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        :dataSource="dataSource"
        :columns="columns"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space wrap>
              <a-button size="small" type="primary" @click="handleAgree(record)" :disabled="record.state==1"
                >排课</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, createVNode, onMounted, ref } from "vue";

import {
  checkTeacherApply,
  teacherApply,
  managementForTeacher,
} from "@/api/methods/adminReq";

import { omit } from "lodash";
import { useRouter } from "vue-router";
import { Message } from "@/utils/message";
import { labTypeQuery } from "@/api/methods/labReq";

const router = useRouter();
const dataSource = ref();
const pageConfig = ref({
  pageSize: 10,
  page: 1,
  total: 0,
});

const columns = [
  {
    title: "教师名字",
    dataIndex: "teacherName",
    key: "teacherName",
    width: "",
  },
  { title: "申请学期", dataIndex: "semesterName", key: "semesterName" },
  { title: "实验室类型", dataIndex: "labTypeName", key: "labTypeName" },
  { title: "课程名称", dataIndex: "courseName", key: "courseName" },
  { title: "学生人数", dataIndex: "studentNum", key: "studentNum" },
  { title: "开始周", dataIndex: "beginWeek", key: "beginWeek" },
  { title: "结束周", dataIndex: "endWeek", key: "endWeek" },
  { title: "节次", dataIndex: "amountOfSession", key: "amountOfSession" },
  {
    title: "审核进度",
    dataIndex: "state",
    key: "state",
    customRender: ({ text, record }) => {
      return translateState(text);
    },
  },
  { title: "操作", dataIndex: "action", key: "action", width: "160px" },
];

interface IPagenation {
  current: number;
  pageSize: number;
  total: number;
}
const pagination = computed(() => ({
  total: pageConfig.value.total,
  current: pageConfig.value.page,
  pageSize: pageConfig.value.pageSize,
}));
const loading = ref(false);
const handleTableChange = async (pagination: IPagenation) => {
  pageConfig.value.page = pagination.current;
  pageConfig.value.pageSize = pagination.pageSize;
  loading.value = true;
  const { data: res } = await teacherApply(omit(pageConfig.value, "total"));
  reflectMapDataSource(res);
  loading.value = false;
};
onMounted(async () => {
  loading.value = true;
  const { data: res } = await teacherApply(omit(pageConfig.value, "total"));
  reflectMapDataSource(res);
  loading.value = false;
});

const labTypes = ref([]);
onMounted(async () => {
  try {
    const labTypeResult = await labTypeQuery({});
    const labTypeOptions = labTypeResult.data.map((type: any) => ({
      value: type.id,
      label: type.typeName,
    }));
    labTypes.value = labTypeOptions;
  } catch (error) {
    console.error("Error fetching lab types:", error);
  }
});

const reflectMapDataSource = (res: any) => {
  pageConfig.value.total = res.total;

  dataSource.value = res.records.map((item: any) => {
    const labTypeName = labTypes.value.find(
      (type: any) => type.value == item.labType
    )?.label;
    return {
      id: item.id,
      state: item.state,
      teacherId: item.teacherId,
      teacherName: item.teacherName,
      semesterId: item.semesterId,
      semesterName: item.semesterName,
      labType: item.labType,
      labTypeName: labTypeName ? labTypeName : "--",
      courseName: item.courseName,
      className: item.className,
      studentNum: item.studentNum,
      beginWeek: item.beginWeek,
      endWeek: item.endWeek,
      amountOfSession: item.amountOfSession,
      comments: item.comments,
    };
  });
};

function handleAgree(record: any) {
  const queryParams = {
    labType: record.labType,
    semesterId: record.semesterId,
    semesterName: record.semesterName,
    beginWeek: record.beginWeek,
    endWeek: record.endWeek,
    studentNum: record.studentNum,
    amountOfSession: record.amountOfSession,
    teacherId: record.teacherId,
    teacherName: record.teacherName,
    courseName: record.courseName,
    state:record.state,
    id:record.id,
    className:record.className
  };

  router.push({
    name: "arrangeClass",
    query: queryParams,
  });
}

async function handleReject(record: any) {
  try {
  } catch (error) {}
}

async function reload() {
  loading.value = true;
  const { data: res } = await teacherApply(omit(pageConfig.value, "total"));
  reflectMapDataSource(res);
  loading.value = false;
}

const translateState = (state: number) => {
  switch (state) {
    case 0:
      return "待排课";
    case 1:
      return "已排课";
    default:
      return "待排课";
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.maincontain {
  display: flex;
  flex-direction: column;
  .createuser {
    margin-bottom: 15px;
  }
}
</style>
@/EnvEnum/form
